<script>
  // @ts-nocheck
  import { goto } from "$app/navigation";
  import {
    Badge,
    Button,
    Card,
    Group,
    Image,
    Space,
    Text,
  } from "@svelteuidev/core";
  import { onMount } from 'svelte';

  let ListData=[]
  async function fetchdata(){
    fetch('/api/list', { method: 'GET',})
    .then((v)=>(v.json()))
    .then((v) => {
      if (v.status !== 0) {
        console.log(v.status)
        console.log(v.msg)
        console.log('read failed');
        return;
      }
      ListData=v.list
      console.log(ListData)
      console.log('read success');
    })
    .catch((e) => {
      if (!e.message) {
        console.log(e);
      } else {
        console.log(e.message);
      }
    });
  }
  onMount(()=>{
    fetchdata()
  })

  
  function handleClick(param) {
    let url = "/List/detail?id=" + param;
    goto(url); // 跳转到带有 ID 的用户页面
  }
</script>

<div class="main" style="display: flex;" >
  <div class="CardList" >
    {#if ListData.length <= 0}
      <p>Loading...</p>
    {/if}
    {#each ListData as item (item.id)}
      <div class="CardItems">
        <Card shadow="sm">
          <Group position="apart">
            <Text size="lg" weight={500}>{item.title}</Text>
            <!-- <Badge color="pink" variant="light">life</Badge> -->
          </Group>

          <Text size="sm" style="padding-top:10px; padding-bottom:20px">
            话题简述：{item.description}
          </Text>
          <div style="display: flex; justify-content: space-between">
            <div style="font-size: small;display:flex">
              <div>{item.owner}</div>
              <Space w={10} />
              <!-- <div>{item.time}</div> -->
            </div>
            <Button
              variant="light"
              color="blue"
              on:click={(e) => handleClick(item.id)}
              ripple
            >
              detail
            </Button>
          </div>
        </Card>
      </div>
    {/each}
  </div>
  <Group position="center">
    <Button
      variant="light"
      color="blue"
      on:click={(e) => goto("/List/addTopic")}
      ripple
      size="lg"
    >
      发布话题
    </Button></Group
  >
</div>

<style>
  .main {
    padding-left: 20%;
    padding-right: 20%;
    height: 730px;
    
  }
  .CardList {
    height: 730px;
    width: 100%;
    background-color: rgb(210, 207, 207);
    overflow: auto;
  }
  .CardItems {
    height: 100px;
    width: auto;
    padding-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 40px;
  }
</style>
